
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta http-equiv="Expires" content="-1" />
        <link href="css/<% theme %>/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="css/jquery.toastmessage.css" rel="stylesheet" type="text/css" />
        <link href="css/<% theme %>/main.css" rel="stylesheet" type="text/css" />
        <link href="css/<% theme %>/control.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/jquery.toastmessage.js"></script>
        <script type="text/javascript" src="js/jquery.upload.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        <title>n3musicbox</title>
    </head>
    <body class="ui-widget-content">
        <header class="n3mb-pane" style="padding:0;">
            <h1 id="n3mb-maintitle" >n3musicbox <span id="n3mb-subtitle">console</span></h1>
        </header>
        <div id="n3mb-main-console">
            <div id="n3mb-controls" class=" n3mb-pane">
                    <a href="#" id="n3mb-toggle-playing-button" class="btn n3mb-control-button ui-widget-content">
                        <img id="n3mb-toggle-playing-button-image" src="images/player_start.png" alt="play" /><br />
                        <span id="n3mb-toggle-playing-button-legend" class="n3mb-control-button-legend">play</span>
                    </a>
                    <a href="#" id="n3mb-previous-button" class="btn n3mb-control-button ui-widget-content">
                        <img src="images/player_previous.png" alt="previous" /><br />
                        <span class="n3mb-control-button-legend">previous</span>
                    </a>
                    <a href="#" id="n3mb-next-button" class="btn n3mb-control-button ui-widget-content">
                        <img src="images/player_next.png" alt="next" /><br />
                        <span class="n3mb-control-button-legend">next</span>
                    </a>
                    <a href="#" id="n3mb-clear-queue-button" class="btn n3mb-control-button ui-widget-content">
                        <img src="images/player_stop.png" alt="clear queue" /><br />
                        <span class="n3mb-control-button-legend">clear</span>
                    </a>
                    <a href="#n3mb-playlist" id="n3mb-playlist-button" class="btn n3mb-control-button ui-widget-content">
                        <img src="images/player_playlist.png" alt="playlist" /><br />
                        <span class="n3mb-control-button-legend">playlist</span>
                    </a>
                    <div style="clear:both;"></div>
            </div>
            <div class="n3mb-pane" id="n3mb-queue">
                <div id="n3mb-queue-controls" class="">

                    <div style="clear:both;"></div>
                </div>
                <div id="n3mb-queue-content">
                </div>
            </div>
        </div>
        <div class="n3mb-shadow-content n3mb-pane" id="n3mb-playlist">
            <div id="n3mb-playlist-controls" class="">
                <a href="#" class="btn n3mb-control-button ui-widget-content n3mb-back-to-main-console">console</a>
                <a href="#" class="btn n3mb-control-button ui-widget-content" id="n3mb-playlist-create-button">create</a>
                <div style="clear:both;"></div>
            </div>
            <div id="n3mb-playlist-content">

            </div>
            <div class="n3mb-shadow-content" id="n3mb-playlist-create-dialog">
                <div id="n3mb-playlist-select-directory" class="ui-widget-content" style="background-image:none;border-width:1px 0 0;margin:0.5em 0 0;padding:0.3em 1em 0.5em 0.4em;text-align:left;">
                    <div style="margin-bottom: 10px;">select directory for making playlist.</div>
                    <label for="n3mb-playlist-select-directory-input" style="padding-left: 10px; display:block;float:left;">directory</label>
                    <div style="float:right;width:400px;">
                        <input type="hidden" name="n3mb-playlist-create-method" value="directory" />
                        <input type="text" name="n3mb-playlist-select-directory-input" id="n3mb-playlist-select-directory-input" style="width:250px;" value="" />
                        <input type="button" name="n3mb-playlist-select-directory-chooser-button" id="n3mb-playlist-select-directory-chooser-button" class="jq-button" value="browse" />
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div id="n3mb-playlist-ditermine-name" class="ui-widget-content" style="background-image:none;border-width:1px 0 0;margin:0.5em 0 0;padding:0.3em 1em 0.5em 0.4em;text-align:left;">
                    <div style="margin-bottom: 10px;">enter playlist name.</div>
                    <label for="n3mb-playlist-select-name-input" style="padding-left: 10px; display:block;float:left;">name</label>
                    <div style="float:right;width:400px;">
                        <input type="text" id="n3mb-playlist-select-name-input" name="n3mb-playlist-select-name-input" style="width:250px;" value="" />
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
            <div class="n3mb-shadow-content" id="n3mb-playlist-dialog-remove-music-confirm-dialog">
                remove music files below.
                <div id="n3mb-playlist-dialog-remove-music-confirm-dialog-target-music-files"></div>
            </div>
            <div class="n3mb-shadow-content" id="n3mb-playlist-dialog-remove-playlist-confirm-dialog">
                <div id="n3mb-playlist-dialog-remove-playlist-confirm-dialog-message">remove playlist.</div>
                <div>
                    <input type="checkbox" id="n3mb-playlist-dialog-remove-playlist-confirm-dialog-remove-with-directory" />
                    <label for="n3mb-playlist-dialog-remove-playlist-confirm-dialog-remove-with-directory">also remove directory.</label>
                </div>
            </div>
        </div>
        <div class="n3mb-shadow-content" id="n3mb-playlist-select-directory-chooser-dialog">
            <div id="n3mb-playlist-select-directory-chooser-path-wrapper" style="margin-bottom:10px;">
                    <input type="text" id="n3mb-playlist-select-directory-chooser-path" value="/" readonly="readonly" style="width:680px;vertical-align: middle;display:block;float:left;" />
                    <button style="vertical-align: middle;display:block;float:right;" class="jq-button" id="n3mb-create-directory-button" title="create new directory"><span class="ui-icon ui-icon-folder-collapsed"></span></button>
                    <div style="clear:both;"></div>
            </div>
            <div id="n3mb-playlist-select-directory-chooser-content" style="height:400px;overflow:auto;"></div>
        </div>
        <div class="n3mb-shadow-content" id="n3mb-create-directory-dialog">
            <div>
                <label for="n3mb-create-directory-input" style="display:block;width:150px;float: left;">directory name</label>
                <input type="text" id="n3mb-create-directory-input" name="n3mb-create-directory-input" value="NewPlaylist" style="display:block;float: left;"/>
                <div style="clear: both;"></div>
            </div>
            <div style="margin-left:150px;" id="n3mb-create-directory-new-directory-preview"></div>
        </div>
        <div class="n3mb-shadow-content" id="n3mb-util-dialog"></div>
        <div class="n3mb-shadow-content" id="n3mb-playlist-dialog-workspace"></div>
        <div class="n3mb-shadow-content" id="n3mb-fileupload-dialog">
            <form id="n3mb-fileupload-form" enctype="multipart/form-data" method="POST">
                <div id="n3mb-fileupload-form-fields">
                    <input id="n3mb-fileupload-form-hidden-playlist-id" type="hidden" name="playlistId" value="" />
                </div>
            </form>
        </div>
    </body>
</html>
